﻿@{
    ViewBag.Title = "Quản lý hỏi đáp";
    Layout = "~/Views/Shared/_Admin.cshtml";
}
@model IEnumerable<TraCuuThuatNgu.Models.Question>
@using PagedList.Mvc;
@using PagedList;
<style type="text/css">
    .wrap-qa
    {
        width: 100%;
        padding: 5px 10px;
    }
    .wrap-qa .dr
    {
        margin-bottom: 0px !important;
    }
    
    .input-question
    {
    }
    
    .question-item
    {
    }
    
    .question-item
    {
        margin-top: 3px;
    }
    
    .question-item .date
    {
        float: right;
        font-size: 11px;
        color: #9b9b9b;
    }
    
    .question-item p
    {
        padding: 2px 5px;
        margin: 0px;
    }
    .input-question
    {
        /*text-align: right;*/
    }
    .input-question textarea
    {
        padding: 5px;
        width: 400px;
        min-height: 50px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 13px;
        display: block;
    }
    
    .question-item-content
    {
        border: 1px solid #ccc;
        border-radius: 6px;
        margin-bottom: 2px;
        background-color: #fff;
    }
    
    .question-item-content .username
    {
        background: url('/Content/img/icons/Help-icon.png') left center no-repeat transparent;
        padding-left: 18px;
        font-weight: bold;
        color: #666;
    }
    
    .btn-answer
    {
        background: url('/Content/img/icons/edit-icon.png') left center no-repeat transparent;
        padding-left: 18px;
    }
    
    .answer-list
    {
        margin-left: 26px; /*border: 1px solid #ccc;*/
        border-radius: 6px;
    }
    
    .answer-item
    {
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-bottom: 0px;
        background-color: #fff;
    }
    .answer-item p
    {
        padding: 2px 5px;
    }
    .answer-item:nth-last-child(1)
    {
        border-bottom: 1px solid #ccc;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }
    .answer-item:first-child
    {
        border-top: 1px solid #ccc;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .answer-item .username-a
    {       
        font-weight: bold;
        color: #000;
    }
    
    .btn-showmore
    {
        padding: 3px 30px;
        border-radius: 2px;
        background-color: #D3D3D3;
        border: 1px solid #ccc;
    }
    .btn-showmore-count
    {
        padding: 3px 3px;
        background-color: #fff;
        border: 1px solid #ccc;
    }
    
    .an-dialog
    {
        width: 300px;
    }
    .an-dialog textarea
    {
        width: 290px;
    }
    .qa
    {
        display: none;
    }
</style>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">

    $(function () {
        // Declare a proxy to reference the hub. 
        var chat = $.connection.chatHub;
        // Create a function that the hub can call to broadcast messages.

        chat.client.getNewReportNotify = function () {
            $("#notifyReport").html('<a class="notify-report-link" href="/QA">Có báo cáo nội dung xấu mới!</a>');
        }


        chat.client.newQuestion = function (username, content, type, qid, date) {

            // New question
            var newItem = '<div style="display:none" class="question-item">'
                                + '<div class="question-item-content">'
                                    + '<p>'
                                        + '<span class="username">' + username + '</span><span class="date">' + date + '</span>'
                                        + '<a style="float:right;margin-right:5px" title="Báo cáo sai phạm" class="btn-report-mini mark-report-q" data-val=""  href="javascript:">'
                                    + '</a></p>'
                                    + '<p>'
                                        + content + '</p>'
                                    + '<p style="text-align: right">'
                                        + '<a class="btn-answer" data-qid="' + qid + '" href="javascript:">Trả lời</a></p>'
                                + '</div>'
                                + '<div id="' + qid + '" class="answer-list">'
                                + '</div>'
                                        + '</div>';
            // Add new question
            $(newItem).prependTo('.question-list').fadeIn('slow');

        };


        chat.client.newAnswer = function (username, content, type, qid, date) {

            // New answer 
            var newItem = '<div style="display:none" class="answer-item">'
                                        + '<p>'
                                            + '<span class="username-a">' + username + '</span>'
                                            + '<span class="date">' + date + '</span>'
                                            + '<a style="float:right;margin-right:5px" title="Báo cáo sai phạm" class="btn-report-mini mark-report-a" data-val=""  href="javascript:">'
                                            + '</a>'
                                            + '</p>'
                                        + '<p>' + content + '</p>'
                                    + '</div>';
            // Add new answer
            $(newItem).appendTo('#' + qid).fadeIn('slow');
        };

        // Check Authenticate
        var checkAuthen = $("#checkAuthen").val();

        // Start the connection.
        $.connection.hub.start().done(function () {

            // Connect --add connectionId to Admin's group.
            chat.server.connect('admin');

            // Send a question
            $('#sendquestion').click(function () {

                if (checkAuthen == 'true') {

                    var checkBlank = $("#questioncontent").val();
                    if ($.trim(checkBlank) == '') {
                        alert("Bạn chưa nhập nội dung.");
                        $("#questioncontent").focus();
                    } else {
                        // Call the Send method on the hub. 
                        chat.server.send($('#questioncontent').val(), "Q", 0);
                        // Clear text box and reset focus for next comment. 
                        $('#questioncontent').val('');
                    }
                } else {
                    alert("Bạn cần đăng nhập để sử dụng chức năng này!");
                }
            });
            // ---end

            // Answer a question -- send to server
            $("#btn-an").live('click', function () {

                var answer_content = $("#an-content").val();
                var qid = $(this).attr('data-qid');
                if ($.trim(answer_content) != '') {
                    chat.server.send(answer_content, "A", qid);
                    $(".an-dialog").remove();
                } else {
                    alert("Bạn chưa nhập nội dung.");
                    $("#an-content").focus();
                }

            });
            // ---end


            // Clear Report          
            $(".btn-accept-qa").live('click', function () {

                var type = $(this).attr('data-type');
                var id = $(this).attr('data-val');
                // Send to server
                chat.server.clearReport(type, id);
                $(this).parent().parent().removeClass('reported');
                $(this).remove();
            });
            // ---end


            // Delete question or answer
            $(".btn-delete-qa").live('click', function () {

                var type = $(this).attr('data-type');
                var id = $(this).attr('data-val');
                // Send to server to delete
                chat.server.deleteQA(type, id);

                // Remove from view
                if (type == 'Q') {
                    $(this).parent().parent().parent().fadeOut('slow');
                } else {
                    $(this).parent().parent().fadeOut('slow');
                }
            });

        });

        // Open answer dialog
        $(".btn-answer").live('click', function (e) {
            if (checkAuthen == 'true') {

                var pageX = e.pageX;
                var pageY = e.pageY;
                var qid = $(this).attr();

                //remove previous dialog
                $(".an-dialog").remove();

                $(".wrap-qa").append('<div class="an-dialog">'
                + '<h2>Trả lời:</h2>'
                + '<textarea id="an-content"></textarea>'
                + '<input class="btn btn-mini" id="btn-an" data-qid="' + $(this).attr("data-qid") + '" type="button" value="Gửi"/>'
                + '<a href="javascript:" class="btn-link an-btn-close">Đóng</a>'
                + '</div>');

                $('.an-dialog').css("top", pageY - 40 + "px");
                $('.an-dialog').css("left", pageX - 520 + "px");
                $('.an-dialog').slideDown('slow');

                $("#an-content").focus();

            } else {
                alert("Bạn cần đăng nhập để sử dụng chức năng này!");
            }

        });

        // Close answer dialog
        $(".an-btn-close").live('click', function () {
            $(this).parent().remove();
        });

        //------------------------------
        // Report question or answer
        // show report icon Answer
        $(".answer-item").live('hover', function () {
            $(this).find(".qa").show();
        });

        // hide report icon Answer
        $(".answer-item").live('mouseleave', function () {
            $(this).find(".qa").hide();
        });

        // show report icon Question
        $(".question-item-content").live('hover', function () {
            $(this).find(".qa").show();
        });

        // hide report icon Question
        $(".question-item-content").live('mouseleave', function () {
            $(this).find(".qa").hide();
        });
    });
</script>
<div class="wrap-qa">
    <div class="input-question">
        <textarea id="questioncontent" placeholder="Nhập thông báo..."></textarea>
        <input type="button" class="btn" style="display: block" id="sendquestion" value="Gửi" />
        <div id="notifyReport"></div>
        @if (Request.IsAuthenticated)
        {        
            <input type="hidden" id="checkAuthen" name="checkAuthen" value="true" />
        }
        else
        { 
            <input type="hidden" id="checkAuthen" name="checkAuthen" value="false" />             
        }
    </div>
    <div class="dr">
        <span id="focus"></span>
    </div>
    <div class="question-list">
        @foreach (var item in Model)
        {
            <div class="question-item">
                @if (item.Reported > 0)
                {
                    <div class="question-item-content reported">
                        <p>
                            <span class="username">@item.aspnet_Users.UserName</span><span class="date">@String.Format("{0:d/M/yyyy HH:mm}", item.DateAdd)</span>
                            <a class="btn-accept btn-accept-qa qa" data-val="@item.QuestionId" data-type="Q" href="javascript:" title="Duyệt">
                            </a><a class="btn-delete btn-delete-qa qa" data-val="@item.QuestionId" data-type="Q" href="javascript:" title="Xóa">
                            </a>
                        </p>
                        <p>
                            @item.QContent</p>
                        <p style="text-align: right">
                            <a class="btn-answer" data-qid="@item.QuestionId" href="javascript:">Trả lời</a></p>
                    </div>
                }
                else
                {
                    <div class="question-item-content">
                        <p>
                            <span class="username">@item.aspnet_Users.UserName</span><span class="date">@String.Format("{0:d/M/yyyy HH:mm}", item.DateAdd)</span>
                            <a class="btn-delete btn-delete-qa qa" data-val="@item.QuestionId" data-type="Q" href="javascript:" title="Xóa">
                            </a>
                        </p>
                        <p>
                            @item.QContent</p>
                        <p style="text-align: right">
                            <a class="btn-answer" data-qid="@item.QuestionId" href="javascript:">Trả lời</a></p>
                    </div>
                }
                <div id="@item.QuestionId" class="answer-list">
                    @foreach (var an in item.Answers)
                    {
                        if (@an.Reported > 0)
                        {
                        <div class="answer-item reported">
                            <p>
                                <span class="username-a">@an.aspnet_Users.UserName</span> <span class="date">@String.Format("{0:d/M/yyyy HH:mm}", an.DateAdd)</span>
                                <a class="btn-accept btn-accept-qa qa" data-val="@an.AnswerId" data-type="A" href="javascript:" title="Duyệt">
                                </a><a class="btn-delete btn-delete-qa qa" data-val="@an.AnswerId" data-type="A" href="javascript:" title="Xóa">
                                </a>
                            </p>
                            <p>
                                @an.AContent</p>
                        </div>   
                        }
                        else
                        {
                        
                        <div class="answer-item">
                            <p>
                                <span class="username-a">@an.aspnet_Users.UserName</span> <span class="date">@String.Format("{0:d/M/yyyy HH:mm}", an.DateAdd)</span>
                                <a class="btn-delete btn-delete-qa qa" data-val="@an.AnswerId" data-type="A" href="javascript:" title="Xóa">
                                </a>
                            </p>
                            <p>
                                @an.AContent</p>
                        </div>   
                        }

                    }
                </div>
            </div>        
        }
    </div>
    <div style="text-align: center; margin-top: 10px;">     
        <div class="view-more">
            @Html.PagedListPager((IPagedList)Model, page => Url.Action("Index", new { page = page }), new PagedListRenderOptions { LinkToFirstPageFormat = "<< Đầu tiên", LinkToPreviousPageFormat = "&larr; Trước", LinkToNextPageFormat = "Sau &rarr;", LinkToLastPageFormat = "&Uacute;Cuối >>" })</div>
    </div>
</div>
